/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from '../../base-ui/BaseElement';
import '../../base-ui/icon/LitIcon';
import { LitIcon } from '../../base-ui/icon/LitIcon';

@element('sp-div-item-temp')
export class SpDivItemTemp extends BaseElement {
  private divIcon: LitIcon | undefined | null;
  private divTitle: HTMLLabelElement | undefined | null;
  private divData: HTMLLabelElement | undefined | null;

  static get observedAttributes() {
    return ['title', 'icon', 'data'];
  }
  initElements(): void {
    this.divIcon = this.shadowRoot?.querySelector<LitIcon>('.temp-icon');
    this.divTitle = this.shadowRoot?.querySelector<HTMLLabelElement>('.temp-title');
    this.divData = this.shadowRoot?.querySelector<HTMLLabelElement>('.temp-data');
  }

  initHtml(): string {
    return `<style>
        :host{
            width: 100%;
            height: 100%;
        }
        .div-panel{
            width: 100%;
            height: 100%;
            display: flex;
            opacity: 1;
            background-color: #FFFFFF;
            border-radius: 15px;
            flex-direction: column;
            align-items: center;
        }
        .div-panel:hover{
            opacity: 0.7;
        }
        
        .temp-icon {
            display: flex;
            height: 60%;
            width: 100%;
        }
        .temp-title {
            display: flex;
            height: 20%;
            width: 100%;
            justify-content: center;
            opacity: 0.8;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
            font-weight: 400;
            overflow: hidden;
        }
        .temp-data {
            display: flex;
            height: 18%;
            width: 100%;
            justify-content: center;
            font-size: 24px;
            font-family: Helvetica;
            color: #000000;
            text-align: center;
            font-weight: 600;
            overflow: hidden;
        }
        </style>
        <div class="div-panel">
            <lit-icon class="temp-icon" name="user" size="80"></lit-icon>
            <label class="temp-title"></label>
            <label class="temp-data"></label>
        </div>
        `;
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    switch (name) {
      case 'title':
        if (this.divTitle) this.divTitle.textContent = newValue;
        break;
      case 'icon':
        if (this.divIcon) this.divIcon.setAttribute('name', newValue);
        break;
      case 'data':
        if (this.divData) this.divData.textContent = newValue;
        break;
    }
  }
}
